<template>
  <div class="outline-editor">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <n-spin size="large" />
      <p class="loading-text">正在加载大纲内容...</p>
    </div>
    
    <!-- 编辑器内容 -->
    <div v-else class="editor-container">
      <div class="editor-content">
        <!-- 根据当前活动标签页显示对应内容 -->
        <div v-if="activeTab === 'outline'" class="editor-pane">
          <EditableTabContent
            ref="outlineEditorRef"
            v-model:content="outlineContent"
            :is-preview-mode="isPreviewMode"
            :loading="outlineLoading"
            loading-message="正在生成大纲内容"
            placeholder="请输入任何故事灵感，开始创作"
          />
        </div>
        
        <div v-if="activeTab === 'chapters'" class="editor-pane">
          <EditableTabContent
            ref="chaptersEditorRef"
            v-model:content="chapterPlanning"
            :is-preview-mode="isPreviewMode"
            :loading="chaptersLoading"
            loading-message="正在生成章节规划"
            placeholder="请输入章节安排，支持Markdown格式..."
          />
        </div>
        
        <div v-if="activeTab === 'sidelines'" class="editor-pane">
          <EditableTabContent
            ref="sidelinesEditorRef"
            v-model:content="sidelinesContent"
            :is-preview-mode="isPreviewMode"
            :loading="sidelinesLoading"
            loading-message="正在生成支线设定"
            placeholder="请输入支线设定，支持Markdown格式..."
          />
        </div>
        
        <!-- 动态临时标签页内容 -->
        <div v-for="tab in tempTabs" :key="tab.id" v-show="activeTab === tab.name" class="editor-pane temp-tab-pane">
          <EditableTabContent
            :ref="el => { if (el) tab.editorRef = el }"
            v-model:content="tab.content"
            :is-preview-mode="isPreviewMode"
            :loading="tab.loading"
            loading-message="正在生成内容"
            placeholder="请输入内容..."
          />
        </div>
      </div>
    </div>
    
    <!-- 底部标签页和按钮组 -->
    <div class="editor-tabs">
      <n-tabs v-model:value="activeTab" type="line" animated tab-position="bottom" :tab-style="{ height: '32px' }">
        <template #suffix>
          <n-space :size="4">
            <n-button @click="togglePreviewMode" :type="isPreviewMode ? 'primary' : 'default'" size="small">
              {{ isPreviewMode ? '编辑' : '预览' }}
            </n-button>
            <n-button @click="copyContent(activeTab)" size="small">
              复制
            </n-button>
            <n-button @click="clearContent(activeTab)" size="small">
              清空
            </n-button>
            <n-button v-if="activeTab === 'outline'" @click="outlineLoading ? abortGeneration('outline') : showGenerateOutlineDialog()" type="primary" size="small" :disabled="!outlineContent.trim()">
              {{ outlineLoading ? '处理中...' : '生成大纲' }}
            </n-button>
            <n-button v-if="activeTab === 'chapters'" @click="chaptersLoading ? abortGeneration('chapters') : showGenerateChaptersDialog()" type="primary" size="small">
              {{ chaptersLoading ? '处理中...' : '生成章节规划' }}
            </n-button>
            <n-button v-if="activeTab === 'sidelines'" @click="sidelinesLoading ? abortGeneration('sidelines') : showGenerateSidelinesDialog()" type="primary" size="small">
              {{ sidelinesLoading ? '处理中...' : '生成支线' }}
            </n-button>
            <!-- 临时标签页的生成/终止按钮 -->
            <n-button v-if="activeTab && activeTab.startsWith('temp_tab_')" 
                      @click="getTempTabByName(activeTab)?.loading ? abortGeneration(activeTab) : showGenerateContentDialog()" 
                      type="primary" 
                      size="small">
              {{ getTempTabByName(activeTab)?.loading ? '处理中...' : '生成内容' }}
            </n-button>
        
            <n-button @click="resetOutline" :disabled="loading" size="small" type="error">
              <template #icon>
                <n-icon><RefreshIcon /></n-icon>
              </template>
              重置
            </n-button>
            <n-button @click="archiveOutline" :loading="archiving" class="archive-btn" size="small">
              归档v{{ version }}
            </n-button>
            <n-button type="primary" @click="saveOutline" :loading="saving" size="small">
              保存
            </n-button>
          </n-space>
        </template>
        <n-tab-pane name="outline" tab="大纲内容">
        </n-tab-pane>
        <n-tab-pane name="chapters" tab="章节规划">
        </n-tab-pane>
        <n-tab-pane name="sidelines" tab="支线设定">
        </n-tab-pane>
        <!-- 动态临时标签页 -->
        <n-tab-pane 
          v-for="tab in tempTabs" 
          :key="tab.id" 
          :name="tab.name" 
          :tab="tab.title"
          :closable="true"
          @close="closeTempTab(tab.id)"
        >
        </n-tab-pane>
      </n-tabs>
    </div>
    
    <!-- 生成对话框 -->
    <GenerateDialog
      v-model:visible="generateDialogVisible"
      :title="generateDialogTitle"
      :confirm-button-text="generateDialogConfirmText"
      :loading="generateDialogLoading"
      :form="generateDialogForm"
      :template-category="generateDialogTemplateCategory"
      :modal-class="generateDialogModalClass"
      @model-select="handleGenerateModelSelect"
      @template-select="handleGenerateTemplateSelect"
      @confirm="handleGenerateConfirm"
      @cancel="handleGenerateCancel"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMessage, useDialog } from 'naive-ui'
import { Refresh as RefreshIcon } from '@vicons/tabler'
import { bookService } from '../services/book-service'
import { useCurrentBookStore } from '../stores/current-book'
import { novelOutlineApi } from '../services/novel-outline-service'
import GenerateDialog from '../components/GenerateDialog.vue'
import EditableTabContent from '../components/EditableTabContent.vue'

const route = useRoute()
const router = useRouter()
const message = useMessage()
const dialog = useDialog()
const currentBookStore = useCurrentBookStore()

// 响应式数据
const loading = ref(false)
const outlineContent = ref('')
const chapterPlanning = ref('')
const sidelinesContent = ref('') // 支线内容
const isPreviewMode = ref(true)
const saving = ref(false)
const archiving = ref(false)
const bookTitle = ref('')
const activeTab = ref('outline')

// 临时标签页管理
const tempTabs = ref([])
const nextTempTabId = ref(1)

// 加载动画控制
const outlineLoading = ref(false)
const chaptersLoading = ref(false)
const sidelinesLoading = ref(false) // 支线加载状态

// 终止信号状态
const outlineAbortSignal = ref('')
const chaptersAbortSignal = ref('')
const sidelinesAbortSignal = ref('')

// 临时标签页管理 - 更新版本，适配EditableTabContent组件
const createTempTab = (title, type) => {
  const tabId = `temp_${nextTempTabId.value++}`
  const tabName = `temp_tab_${tabId}`
  
  const newTab = {
    id: tabId,
    name: tabName,
    title: title,
    content: '',
    type: type,
    loading: false,
    abortSignal: '', // 确保abortSignal属性始终存在
    editorRef: null
  }
  
  tempTabs.value.push(newTab)
  activeTab.value = tabName
  
  return newTab
}

const closeTempTab = (tabId) => {
  const index = tempTabs.value.findIndex(tab => tab.id === tabId)
  if (index !== -1) {
    // 如果关闭的是当前活动标签页，切换到其他标签页
    if (activeTab.value === tempTabs.value[index].name) {
      activeTab.value = 'outline'
    }
    tempTabs.value.splice(index, 1)
  }
}

const getTempTabByName = (name) => {
  return tempTabs.value.find(tab => tab.name === name)
}

// 引用DOM元素 - 只保留必要的引用
const outlineEditorRef = ref(null)
const chaptersEditorRef = ref(null)
const sidelinesEditorRef = ref(null) // 支线编辑器引用

// 动态加载文本
const loadingText = ref('AI正在思考中')
const loadingTextTimer = ref(null)

// 空状态
const isEmpty = computed(() => {
  return !outlineContent.value.trim() && !chapterPlanning.value.trim() && !sidelinesContent.value.trim()
})

// 生成对话框相关
const generateDialogVisible = ref(false)
const generateDialogLoading = ref(false)
const generateDialogTitle = ref('')
const generateDialogConfirmText = ref('')
const generateDialogTemplateCategory = ref('')
const generateDialogModalClass = ref('')
const generateDialogType = ref('') // 当前生成类型：outline/chapters/sidelines
const generateDialogForm = ref({
  modelId: null,
  systemPromptId: null,
  appendMode: 'append'
})

// 获取路由参数
const bookId = computed(() => {
  const id = route.params.id;
  return parseInt(String(id)) || 0;
})
const version = computed(() => {
  // 从路径参数中获取版本号，而不是查询参数
  const ver = route.params.version;
  return parseInt(String(ver)) || 1;
})

// 初始化
onMounted(async () => {
  // 获取书籍信息
  if (bookId.value) {
    try {
      const response = await bookService.getBookById(bookId.value)
      if (response.code === 0 && response.data) {
        bookTitle.value = response.data.title || '未命名书籍'
        currentBookStore.setCurrentBook(response.data)
      }
    } catch (error) {
      console.error('获取书籍信息失败:', error)
    }
    
    // 加载大纲内容
    await loadOutline()
  }
})

// 清理定时器，防止内存泄漏
onUnmounted(() => {
  // 清理加载动画定时器
  if (loadingTextTimer.value) {
    clearInterval(loadingTextTimer.value)
    loadingTextTimer.value = null
  }
  
  // 清理所有EditableTabContent组件中的滚动检查定时器
  if (outlineEditorRef.value) {
    outlineEditorRef.value.stopScrollMonitoring()
  }
  if (chaptersEditorRef.value) {
    chaptersEditorRef.value.stopScrollMonitoring()
  }
  if (sidelinesEditorRef.value) {
    sidelinesEditorRef.value.stopScrollMonitoring()
  }
  
  // 清理临时标签页的滚动检查定时器
  tempTabs.value.forEach(tab => {
    if (tab.editorRef) {
      tab.editorRef.stopScrollMonitoring()
    }
  })
})

// 重置大纲
const resetOutline = () => {
  if (!bookId.value) {
    message.warning('没有可重置的大纲')
    return
  }

  dialog.warning({
    title: '确认重置',
    content: '确定要重置当前大纲吗？此操作将撤销所有未保存的修改，并从服务器重新加载原始数据。',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      loadOutline()
      message.success('大纲已重置')
    }
  })
}

// 切换预览模式
const togglePreviewMode = () => {
  isPreviewMode.value = !isPreviewMode.value
}

// 加载大纲数据
const loadOutline = async () => {
  if (!bookId.value) return
  
  try {
    // 使用新接口加载指定版本的大纲
    const response = await novelOutlineApi.getOutlineByBookVersion(bookId.value, version.value)
    if (response.code === 0 && response.data) {
      outlineContent.value = response.data.outlineDetails || ''
      chapterPlanning.value = response.data.chapterPlanning || ''
      sidelinesContent.value = response.data.sidelinesContent || ''
    } else {
      // 如果获取不到指定版本的大纲，显示友好的空状态
      outlineContent.value = ''
      chapterPlanning.value = ''
      sidelinesContent.value = ''
      // 显示提示信息而不是错误
      message.info(`未找到版本 ${version.value} 的大纲，已为您创建空白大纲`)
    }
  } catch (error) {
    console.error('加载大纲失败:', error)
    // 显示友好的错误提示
    message.error('加载大纲失败，请稍后重试')
    
    // 提供默认内容，避免白屏
    outlineContent.value = ''
    chapterPlanning.value = ''
    sidelinesContent.value = ''
  }
}

// 动态加载文本效果 - 优化版本
const startLoadingAnimation = (type = 'outline') => {
  // 检查是否是临时标签页
  if (type.startsWith('temp_tab_')) {
    const tempTab = getTempTabByName(type)
    if (tempTab) {
      tempTab.loading = true
    }
  } else if (type === 'content') {
    // 处理临时标签页的内容生成
    const currentTab = getTempTabByName(activeTab.value)
    if (currentTab) {
      currentTab.loading = true
    }
  } else {
    // 原有标签页处理逻辑
    const refs = elementRefs[type]
    if (!refs || !refs.loadingRef) return
    
    // 设置对应的加载状态
    refs.loadingRef.value = true
  }
  
  const loadingTexts = {
    outline: '正在生成大纲内容',
    chapters: '正在生成章节规划',
    sidelines: '正在生成支线设定',
    content: '正在生成内容'
  }
  
  const baseText = loadingTexts[type] || '正在生成内容'
  let dots = 0
  let phase = 0 // 用于控制动画阶段
  
  // 清除之前的定时器
  if (loadingTextTimer.value) {
    clearInterval(loadingTextTimer.value)
    loadingTextTimer.value = null
  }
  
  // 设置初始文本
  loadingText.value = baseText + '...'
  
  // 创建动态省略号效果，包含多种动画阶段
  loadingTextTimer.value = setInterval(() => {
    // 第一阶段：增加省略号数量
    if (phase === 0) {
      dots = (dots + 1) % 4
      loadingText.value = baseText + '.'.repeat(dots)
      
      // 当达到3个点时，进入第二阶段
      if (dots === 3) {
        phase = 1
      }
    } 
    // 第二阶段：减少省略号数量
    else if (phase === 1) {
      dots = (dots - 1 + 4) % 4
      loadingText.value = baseText + '.'.repeat(dots)
      
      // 当减少到0个点时，进入第三阶段
      if (dots === 0) {
        phase = 2
      }
    }
    // 第三阶段：短暂暂停
    else if (phase === 2) {
      loadingText.value = baseText
      // 短暂停顿后重新开始
      setTimeout(() => {
        phase = 0
      }, 200)
    }
  }, 300) // 加快动画速度，使效果更明显
}

// 停止加载动画
const stopLoadingAnimation = () => {
  // 重置所有加载状态，包括临时标签页
  Object.values(elementRefs).forEach(refs => {
    if (refs.loadingRef) {
      refs.loadingRef.value = false
    }
  })
  
  tempTabs.value.forEach(tab => {
    tab.loading = false
  })
  
  if (loadingTextTimer.value) {
    clearInterval(loadingTextTimer.value)
    loadingTextTimer.value = null
  }
}

// 元素引用配置 - 简化版本，只保留必要的引用
const elementRefs = {
  outline: {
    editorRef: outlineEditorRef,
    loadingRef: outlineLoading
  },
  chapters: {
    editorRef: chaptersEditorRef,
    loadingRef: chaptersLoading
  },
  sidelines: {
    editorRef: sidelinesEditorRef,
    loadingRef: sidelinesLoading
  }
}

// 光标定位到开头 - 更新版本，适配EditableTabContent组件
const setCursorToStart = (type = 'outline') => {
  nextTick(() => {
    const refs = elementRefs[type]
    if (!refs?.editorRef.value) return
    
    // 通过EditableTabContent组件的方法来设置光标位置
    if (refs.editorRef.value.setCursorToStart) {
      refs.editorRef.value.setCursorToStart()
    }
  })
}

// 光标定位到结尾 - 更新版本，适配EditableTabContent组件
const setCursorToEnd = (type = 'outline') => {
  nextTick(() => {
    const refs = elementRefs[type]
    if (!refs?.editorRef.value) return
    
    // 通过EditableTabContent组件的方法来设置光标位置
    if (refs.editorRef.value.setCursorToEnd) {
      refs.editorRef.value.setCursorToEnd()
    }
  })
}

// 自动滚动到底部 - 更新版本，适配EditableTabContent组件
const scrollToBottom = (type = 'outline') => {
  nextTick(() => {
    const refs = elementRefs[type]
    if (!refs?.editorRef.value) return
    
    // 通过EditableTabContent组件的方法来滚动到底部
    if (refs.editorRef.value.scrollToBottom) {
      refs.editorRef.value.scrollToBottom()
    }
  })
}

// 临时标签页滚动到底部 - 更新版本，适配EditableTabContent组件
const scrollToTempTabBottom = (tempTab) => {
  nextTick(() => {
    if (!tempTab?.editorRef) return
    
    // 优先使用流式滚动方法，实现平滑滚动效果
    if (tempTab.editorRef.streamScrollToBottom) {
      tempTab.editorRef.streamScrollToBottom()
    } else if (tempTab.editorRef.scrollToBottom) {
      // 降级处理，使用普通滚动
      tempTab.editorRef.scrollToBottom()
    }
  })
}

// 保存大纲
const saveOutline = async () => {
  if (!bookId.value) {
    message.error('无效的书籍ID')
    return
  }
  
  // 验证内容 - 只检查当前活动标签页内容
  if (activeTab.value === 'outline' && !outlineContent.value.trim()) {
    message.error('大纲内容不能为空')
    return
  }
  
  if (activeTab.value === 'chapters' && !chapterPlanning.value.trim()) {
    message.error('章节安排不能为空')
    return
  }
  
  if (activeTab.value === 'sidelines' && !sidelinesContent.value.trim()) {
    message.error('支线设定不能为空')
    return
  }
  
  // 处理章节规划，如果为空则传入"[]"
  const chapterPlanningData = chapterPlanning.value.trim() || "[]"
  
  saving.value = true
  try {
    // 更新现有大纲
    const response = await novelOutlineApi.updateOutline({
      bookId: bookId.value,
      version: version.value,
      outlineDetails: outlineContent.value,
      chapterPlanning: chapterPlanningData,
      sidelinesContent: sidelinesContent.value
    })
    
    if (response.code === 0) {
      message.success('大纲保存成功')
    } else {
      message.error(response.message || '保存大纲失败')
    }
  } catch (error) {
    console.error('保存大纲失败:', error)
    // 显示友好的错误提示
    if (error instanceof Error) {
      console.error('错误详情:', error.message)
    }
    message.error('保存大纲失败，请稍后重试')
  } finally {
    saving.value = false
  }
}

// 归档大纲
const archiveOutline = async () => {
  if (!bookId.value) {
    message.error('无效的书籍ID')
    return
  }
  
  // 验证内容 - 只检查当前活动标签页内容
  if (activeTab.value === 'outline' && !outlineContent.value.trim()) {
    message.error('大纲内容不能为空')
    return
  }
  
  if (activeTab.value === 'chapters' && !chapterPlanning.value.trim()) {
    message.error('章节安排不能为空')
    return
  }
  
  // 处理章节规划，如果为空则传入"[]"
  const chapterPlanningData = chapterPlanning.value.trim() || "[]"
  
  archiving.value = true
  try {
    // 使用归档大纲的接口，传递当前版本参数
    const response = await novelOutlineApi.archiveOutline({
      bookId: bookId.value,
      version: version.value, // 添加当前版本参数
      outlineDetails: outlineContent.value,
      chapterPlanning: chapterPlanningData,
      sidelinesContent: sidelinesContent.value // 添加支线内容参数
    })
    
    if (response.code === 0) {
      const newVersion = response.data.version || version.value + 1
      message.success(`大纲已归档为新版本 ${newVersion}`)
      
      // 不更新路由参数中的版本号，保持在当前版本
      // 只刷新导航面板的大纲列表
      if (typeof window !== 'undefined' && window.navigationSidebar) {
        window.navigationSidebar.refreshOutlines()
      }
    } else {
      message.error(response.message || '归档大纲失败')
    }
  } catch (error) {
    console.error('归档大纲失败:', error)
    // 显示友好的错误提示
    if (error instanceof Error) {
      console.error('错误详情:', error.message)
    }
    message.error('归档大纲失败，请稍后重试')
  } finally {
    archiving.value = false
  }
}

// 生成类型配置
const generateConfig = {
  outline: {
    title: '生成大纲',
    confirmText: '生成大纲',
    templateCategory: '大纲',
    modalClass: 'generate-outline-dialog',
    systemPromptId: 13,
    loadingType: 'outline',
    contentRef: 'outlineContent',
    editorRef: 'outlineEditorRef',
    textareaRef: 'outlineTextareaRef',
    successMessage: '大纲生成完成',
    errorMessage: '生成大纲失败',
    getUserPrompt: () => outlineContent.value.trim(),
    validateContent: () => {
      if (!outlineContent.value || !outlineContent.value.trim()) {
        message.error('请先在编辑区输入内容')
        return false
      }
      return true
    }
  },
  chapters: {
    title: '生成章节规划',
    confirmText: '生成章节规划',
    templateCategory: '章节规划',
    modalClass: 'generate-chapters-dialog',
    systemPromptId: null,
    loadingType: 'chapters',
    contentRef: 'chapterPlanning',
    editorRef: 'chaptersEditorRef',
    textareaRef: 'chaptersTextareaRef',
    successMessage: '章节规划生成完成',
    errorMessage: '生成章节规划失败',
    getUserPrompt: () => {
      let userPrompt = ''
      
      // 如果大纲内容不为空，则使用大纲内容作为用户提示词
      if (outlineContent.value && outlineContent.value.trim()) {
        userPrompt = outlineContent.value.trim()
      }
      
      if (!userPrompt) {
        message.error('大纲内容为空，无法生成章节规划')
        return null
      }
      
      return userPrompt
    },
    validateContent: () => true
  },
  sidelines: {
    title: '生成支线设定',
    confirmText: '生成支线设定',
    templateCategory: '支线',
    modalClass: 'generate-sidelines-dialog',
    systemPromptId: null,
    loadingType: 'sidelines',
    contentRef: 'sidelinesContent',
    editorRef: 'sidelinesEditorRef',
    textareaRef: 'sidelinesTextareaRef',
    successMessage: '支线设定生成完成',
    errorMessage: '生成支线设定失败',
    getUserPrompt: () => {
      let userPrompt = ''
      
      // 如果支线编辑区为空，则使用大纲内容作为用户提示词
      if (!sidelinesContent.value || !sidelinesContent.value.trim()) {
        if (!outlineContent.value || !outlineContent.value.trim()) {
          message.error('支线编辑区为空，且大纲内容也为空，无法生成支线设定')
          return null
        }
        userPrompt = outlineContent.value.trim()
      } else {
        userPrompt = sidelinesContent.value.trim()
      }
      
      return userPrompt
    },
    validateContent: () => true // 支线设定的内容验证在getUserPrompt中进行
  },
  content: {
    title: '生成内容',
    confirmText: '生成内容',
    templateCategory: '内容',
    modalClass: 'generate-content-dialog',
    systemPromptId: null,
    loadingType: 'content',
    contentRef: 'content',
    editorRef: 'contentEditorRef',
    textareaRef: 'contentTextareaRef',
    successMessage: '内容生成完成',
    errorMessage: '生成内容失败',
    getUserPrompt: () => {
      // 获取当前临时标签页的内容
      const currentTab = getTempTabByName(activeTab.value)
      if (!currentTab) {
        message.error('无法获取当前标签页信息')
        return null
      }
      
      let userPrompt = ''
      
      // 如果当前标签页有内容，则使用该内容作为用户提示词
      if (currentTab.content && currentTab.content.trim()) {
        userPrompt = currentTab.content.trim()
      } else {
        // 如果当前标签页没有内容，则尝试使用大纲内容作为用户提示词
        if (outlineContent.value && outlineContent.value.trim()) {
          userPrompt = outlineContent.value.trim()
        } else {
          message.error('当前标签页内容为空，且大纲内容也为空，无法生成内容')
          return null
        }
      }
      
      return userPrompt
    },
    validateContent: () => true // 内容验证在getUserPrompt中进行
  }
}

// 显示生成对话框
const showGenerateDialog = (type) => {
  generateDialogType.value = type
  const config = generateConfig[type]
  
  // 根据类型设置对话框标题、确认按钮文本、模板类型等
  generateDialogTitle.value = config.title
  generateDialogConfirmText.value = config.confirmText
  generateDialogTemplateCategory.value = config.templateCategory
  generateDialogModalClass.value = config.modalClass
  generateDialogForm.value.systemPromptId = config.systemPromptId
  
  generateDialogVisible.value = true
}

// 显示生成大纲对话框
const showGenerateOutlineDialog = () => {
  showGenerateDialog('outline')
}

// 显示生成章节规划对话框
const showGenerateChaptersDialog = () => {
  showGenerateDialog('chapters')
}

// 显示生成支线设定对话框
const showGenerateSidelinesDialog = () => {
  showGenerateDialog('sidelines')
}

// 显示生成内容对话框（用于临时标签页）
const showGenerateContentDialog = () => {
  showGenerateDialog('content')
}

// 统一的生成处理函数
const handleGenerate = () => {
  // 根据类型调用相应的生成函数
  generateContent(generateDialogType.value)
}

// 内容引用配置
const contentRefs = {
  outline: outlineContent,
  chapters: chapterPlanning,
  sidelines: sidelinesContent
}

// 统一的内容生成函数
const generateContent = async (type) => {
  const config = generateConfig[type]
  
  if (!bookId.value) {
    message.error('无效的书籍ID')
    return
  }
  
  // 验证表单
  if (!generateDialogForm.value.modelId) {
    message.error('请选择模型')
    return
  }
  
  // 验证内容
  if (!config.validateContent()) {
    return
  }
  
  // 获取用户提示词
  const userPrompt = config.getUserPrompt()
  if (!userPrompt) {
    return
  }
  
  generateDialogLoading.value = true
  generateDialogVisible.value = false
  
  // 如果选择了新标签页模式，创建临时标签页
  let targetTab = null
  let contentRef = null
  let loadingRef = null
  let abortSignalRef = null
  
  if (generateDialogForm.value.appendMode === 'newTab') {
    // 创建临时标签页
    const tabTitle = `${config.title.substring(0, 4)}${nextTempTabId.value}`
    targetTab = createTempTab(tabTitle, type)
    
    // 确保targetTab被正确创建
    if (!targetTab) {
      message.error('创建临时标签页失败')
      generateDialogLoading.value = false
      return
    }
    
    // 确保targetTab的属性存在
    if (targetTab.content === undefined || targetTab.content === null) {
      targetTab.content = ''
    }
    if (targetTab.loading === undefined || targetTab.loading === null) {
      targetTab.loading = false
    }
    if (targetTab.abortSignal === undefined || targetTab.abortSignal === null) {
      targetTab.abortSignal = ''
    }
    
    // 使用Vue的ref创建真正的响应式引用
    contentRef = ref(targetTab.content)
    
    // 创建loadingRef
    loadingRef = ref(targetTab.loading)
    
    // 创建abortSignalRef - 确保它始终是一个有效的Vue ref对象
    try {
      // 先检查targetTab.abortSignal是否存在
      const initialSignal = targetTab && targetTab.abortSignal ? targetTab.abortSignal : ''
      abortSignalRef = ref(initialSignal)
      
      // 验证abortSignalRef是否正确创建
      if (!abortSignalRef || typeof abortSignalRef !== 'object' || !('value' in abortSignalRef)) {
        console.error('abortSignalRef创建失败，尝试重新创建')
        abortSignalRef = { value: initialSignal }
      }
    } catch (error) {
      console.error('创建abortSignalRef时出错:', error)
      // 如果创建失败，创建一个新的简单对象模拟ref
      abortSignalRef = { value: '' }
    }
    
    // 监听contentRef的变化，同步更新targetTab.content
    watch(contentRef, (newValue) => {
      if (targetTab) {
        targetTab.content = newValue
        // 强制触发临时标签页的响应式更新
        const tabIndex = tempTabs.value.findIndex(tab => tab.id === targetTab.id)
        if (tabIndex !== -1) {
          // 创建新对象确保响应式更新
          const updatedTab = { ...tempTabs.value[tabIndex], content: newValue }
          tempTabs.value.splice(tabIndex, 1, updatedTab)
          // 更新targetTab引用，确保它指向最新的对象
          targetTab = tempTabs.value[tabIndex]
        }
      }
    })
    
    // 监听loadingRef的变化，同步更新targetTab.loading
    watch(loadingRef, (newValue) => {
      if (targetTab) {
        targetTab.loading = newValue
        // 强制触发临时标签页的响应式更新
        const tabIndex = tempTabs.value.findIndex(tab => tab.id === targetTab.id)
        if (tabIndex !== -1) {
          // 创建新对象确保响应式更新
          const updatedTab = { ...tempTabs.value[tabIndex], loading: newValue }
          tempTabs.value.splice(tabIndex, 1, updatedTab)
          // 更新targetTab引用，确保它指向最新的对象
          targetTab = tempTabs.value[tabIndex]
        }
      }
    })
    
    // 监听abortSignalRef的变化，同步更新targetTab.abortSignal
    watch(abortSignalRef, (newValue) => {
      if (targetTab) {
        targetTab.abortSignal = newValue
        // 强制触发临时标签页的响应式更新
        const tabIndex = tempTabs.value.findIndex(tab => tab.id === targetTab.id)
        if (tabIndex !== -1) {
          // 创建新对象确保响应式更新
          const updatedTab = { ...tempTabs.value[tabIndex], abortSignal: newValue }
          tempTabs.value.splice(tabIndex, 1, updatedTab)
          // 更新targetTab引用，确保它指向最新的对象
          targetTab = tempTabs.value[tabIndex]
        }
      }
    })
  } else {
    // 使用现有标签页
    if (type === 'content') {
      // 处理临时标签页的内容生成
      targetTab = getTempTabByName(activeTab.value)
      if (!targetTab) {
        message.error('无法获取当前标签页信息')
        generateDialogLoading.value = false
        return
      }
      
      // 确保targetTab的属性存在
      if (targetTab.content === undefined || targetTab.content === null) {
        targetTab.content = ''
      }
      if (targetTab.loading === undefined || targetTab.loading === null) {
        targetTab.loading = false
      }
      if (targetTab.abortSignal === undefined || targetTab.abortSignal === null) {
        targetTab.abortSignal = ''
      }
      
      // 使用Vue的ref创建真正的响应式引用
      contentRef = ref(targetTab.content)
      
      // 创建loadingRef
      loadingRef = ref(targetTab.loading)
      
      // 创建abortSignalRef - 确保它始终是一个有效的Vue ref对象
      try {
        // 先检查targetTab.abortSignal是否存在
        const initialSignal = targetTab && targetTab.abortSignal ? targetTab.abortSignal : ''
        abortSignalRef = ref(initialSignal)
        
        // 验证abortSignalRef是否正确创建
        if (!abortSignalRef || typeof abortSignalRef !== 'object' || !('value' in abortSignalRef)) {
          console.error('abortSignalRef创建失败，尝试重新创建')
          abortSignalRef = { value: initialSignal }
        }
      } catch (error) {
        console.error('创建abortSignalRef时出错:', error)
        // 如果创建失败，创建一个新的简单对象模拟ref
        abortSignalRef = { value: '' }
      }
      
      // 监听contentRef的变化，同步更新targetTab.content
      watch(contentRef, (newValue) => {
        if (targetTab) {
          targetTab.content = newValue
          // 强制触发临时标签页的响应式更新
          const tabIndex = tempTabs.value.findIndex(tab => tab.id === targetTab.id)
          if (tabIndex !== -1) {
            // 创建新对象确保响应式更新
            const updatedTab = { ...tempTabs.value[tabIndex], content: newValue }
            tempTabs.value.splice(tabIndex, 1, updatedTab)
            // 更新targetTab引用，确保它指向最新的对象
            targetTab = tempTabs.value[tabIndex]
          }
        }
      })
      
      // 监听loadingRef的变化，同步更新targetTab.loading
      watch(loadingRef, (newValue) => {
        if (targetTab) {
          targetTab.loading = newValue
          // 强制触发临时标签页的响应式更新
          const tabIndex = tempTabs.value.findIndex(tab => tab.id === targetTab.id)
          if (tabIndex !== -1) {
            // 创建新对象确保响应式更新
            const updatedTab = { ...tempTabs.value[tabIndex], loading: newValue }
            tempTabs.value.splice(tabIndex, 1, updatedTab)
            // 更新targetTab引用，确保它指向最新的对象
            targetTab = tempTabs.value[tabIndex]
          }
        }
      })
      
      // 监听abortSignalRef的变化，同步更新targetTab.abortSignal
      watch(abortSignalRef, (newValue) => {
        if (targetTab) {
          targetTab.abortSignal = newValue
          // 强制触发临时标签页的响应式更新
          const tabIndex = tempTabs.value.findIndex(tab => tab.id === targetTab.id)
          if (tabIndex !== -1) {
            // 创建新对象确保响应式更新
            const updatedTab = { ...tempTabs.value[tabIndex], abortSignal: newValue }
            tempTabs.value.splice(tabIndex, 1, updatedTab)
            // 更新targetTab引用，确保它指向最新的对象
            targetTab = tempTabs.value[tabIndex]
          }
        }
      })
    } else {
      // 原有标签页处理逻辑
      const refs = elementRefs[type]
      if (refs?.editorRef?.value && refs?.textareaRef) {
        try {
          refs.textareaRef.value = refs.editorRef.value
        } catch (error) {
          console.error('设置textareaRef.value时出错:', error)
        }
      }
      
      contentRef = contentRefs[type]
      
      // 确保contentRef存在
      if (!contentRef) {
        message.error('获取内容引用失败')
        generateDialogLoading.value = false
        return
      }
      
      // 根据类型设置对应的引用
      if (type === 'outline') {
        loadingRef = outlineLoading
        abortSignalRef = outlineAbortSignal
      } else if (type === 'chapters') {
        loadingRef = chaptersLoading
        abortSignalRef = chaptersAbortSignal
      } else if (type === 'sidelines') {
        loadingRef = sidelinesLoading
        abortSignalRef = sidelinesAbortSignal
      }
    }
  }
  
  // 启动加载动画
  const loadingType = generateDialogForm.value.appendMode === 'newTab' 
    ? (targetTab?.type || type) 
    : type
  startLoadingAnimation(loadingType)
  
  try {
    // 确保contentRef存在
    if (!contentRef) {
      message.error('内容引用不存在')
      generateDialogLoading.value = false
      return
    }
    
    // 保存原始内容，以防接口调用失败
    let originalContent = ''
    try {
      if (contentRef && typeof contentRef === 'object' && 'value' in contentRef && contentRef.value !== undefined && contentRef.value !== null) {
        originalContent = contentRef.value
      }
    } catch (error) {
      console.error('保存原始内容时出错:', error)
      originalContent = ''
    }
    
    // 生成唯一的终止信号
    const abortSignal = `abort_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
    
    // 设置对应的终止信号
    if (abortSignalRef && typeof abortSignalRef === 'object' && 'value' in abortSignalRef) {
      try {
        abortSignalRef.value = abortSignal
      } catch (error) {
        console.error('设置终止信号时出错:', error)
        generateDialogLoading.value = false
        return
      }
    } else {
      console.error('abortSignalRef不是一个有效的Vue ref对象，无法设置终止信号')
      generateDialogLoading.value = false
      return
    }
    
    // 构建请求参数
    const request = {
      bookId: bookId.value,
      modelId: generateDialogForm.value.modelId,
      systemPromptId: generateDialogForm.value.systemPromptId,
      userPrompt: userPrompt,
      abortSignal: abortSignal
    }
    
    // 根据类型选择API
    let response
    if (type === 'outline') {
      response = await novelOutlineApi.generateOutlineStream(request)
    } else if (type === 'chapters') {
      response = await novelOutlineApi.generateChaptersStream(request)
    } else if (type === 'sidelines') {
      response = await novelOutlineApi.generateSidelinesStream(request)
    } else if (type === 'content') {
      // 临时标签页的内容生成，使用大纲生成API
      response = await novelOutlineApi.generateOutlineStream(request)
    }
    
    if (!response.ok) {
      // 确保contentRef存在
      if (contentRef && typeof contentRef === 'object' && 'value' in contentRef && contentRef.value !== undefined && contentRef.value !== null) {
        // 恢复原始内容
        contentRef.value = originalContent
      }
      // 重置终止信号
      if (abortSignalRef && typeof abortSignalRef === 'object' && 'value' in abortSignalRef) {
        try {
          abortSignalRef.value = ''
        } catch (error) {
          console.error('错误处理中重置终止信号时出错:', error)
        }
      }
      throw new Error(config.errorMessage)
    }
    
    // 根据生成方式决定是否清空当前内容
    if (generateDialogForm.value.appendMode === 'overwrite' || generateDialogForm.value.appendMode === 'newTab') {
      // 确保contentRef存在
      if (!contentRef) {
        console.error('内容引用不存在，无法清空内容')
        generateDialogLoading.value = false
        return
      }
      
      // 安全地清空内容
      try {
        // 确保contentRef是一个有效的Vue ref对象
        if (contentRef && typeof contentRef === 'object' && 'value' in contentRef) {
          contentRef.value = ''
        } else {
          console.error('contentRef不是一个有效的Vue ref对象，无法清空内容')
          generateDialogLoading.value = false
          return
        }
      } catch (error) {
        console.error('清空内容时出错:', error)
        generateDialogLoading.value = false
        return
      }
      
      // 对于临时标签页，内容已经通过watch监听器同步更新，不需要手动更新
      
      // 覆盖生成或新标签页生成时，将光标定位到开头
      if (generateDialogForm.value.appendMode === 'newTab') {
        // 对于新标签页，需要特殊处理光标定位
        nextTick(() => {
          const tempTab = getTempTabByName(activeTab.value)
          if (tempTab?.editorRef) {
            const textarea = tempTab.editorRef.$el?.querySelector('textarea')
            if (textarea) {
              textarea.focus()
              textarea.setSelectionRange(0, 0)
            }
          }
        })
      } else {
        setCursorToStart(type)
      }
    } else {
      // 追加生成时，将光标定位到结尾
      setCursorToEnd(type)
    }
    
    // 注释掉这一行，保持遮罩动画显示直到流式数据开始接收
    // 在开始接收流式数据前停止全局加载动画，让用户看到打字机效果
    // stopLoadingAnimation()
    
    const reader = response.body.getReader()
    const decoder = new TextDecoder()
    let buffer = ''
    
    // 处理流式数据
    while (true) {
      // 检查是否已被终止
      const currentAbortSignal = (abortSignalRef && typeof abortSignalRef === 'object' && 'value' in abortSignalRef) 
        ? abortSignalRef.value 
        : null
      
      // 如果终止信号已被清空，说明用户已终止生成
      if (!currentAbortSignal) {
        break
      }
      
      const { done, value } = await reader.read()
      
      // 在开始接收第一个数据块时停止加载动画
      if (!done) {
        stopLoadingAnimation()
      }
      
      if (done) {
        // 流结束时重置终止信号
        if (abortSignalRef && typeof abortSignalRef === 'object' && 'value' in abortSignalRef) {
          try {
            abortSignalRef.value = ''
          } catch (error) {
            console.error('重置终止信号时出错:', error)
          }
        }
        break
      }
      
      // 后端返回的是纯文本流，不是JSON格式
      const chunk = decoder.decode(value, { stream: true })
      
      // 直接将文本块添加到内容中
      if (chunk) {
        // 确保contentRef存在
        if (!contentRef) {
          console.error('内容引用不存在，无法添加文本块')
          break
        }
        
        // 确保contentRef.value存在
        if (contentRef.value === undefined || contentRef.value === null) {
          // 确保contentRef是一个有效的Vue ref对象
          if (contentRef && typeof contentRef === 'object' && 'value' in contentRef) {
            contentRef.value = ''
          } else {
            console.error('contentRef不是一个有效的Vue ref对象，无法初始化内容')
            break
          }
        }
        
        // 安全地更新内容
        try {
          // 确保contentRef是一个有效的Vue ref对象
          if (contentRef && typeof contentRef === 'object' && 'value' in contentRef) {
            contentRef.value += chunk
          } else {
            console.error('contentRef不是一个有效的Vue ref对象，无法更新内容')
            break
          }
        } catch (error) {
          console.error('更新内容时出错:', error)
          break
        }
        
        // 对于临时标签页，内容已经通过watch监听器同步更新，不需要手动更新
        
        // 强制触发响应式更新，确保内容实时显示
        nextTick(() => {
          // 触发视图更新
          if (generateDialogForm.value.appendMode === 'newTab') {
            // 对于新标签页，需要特殊处理滚动
            const tempTab = getTempTabByName(activeTab.value)
            if (tempTab) {
              // 使用增强的滚动方法，实现类似ChatGPT的平滑滚动效果
              scrollToTempTabBottom(tempTab)
            }
          } else {
            // 调用EditableTabContent组件的流式滚动方法，实现平滑滚动效果
            const refs = elementRefs[type]
            if (refs?.editorRef?.value?.streamScrollToBottom) {
              refs.editorRef.value.streamScrollToBottom()
            } else if (refs?.editorRef?.value?.scrollToBottom) {
              // 降级处理，使用普通滚动
              refs.editorRef.value.scrollToBottom()
            } else {
              // 最后的降级方案，调用组件的滚动方法
              scrollToBottom(type)
            }
          }
        })
      }
    }
    
    // 成功完成后停止加载动画
    stopLoadingAnimation()
    message.success(config.successMessage)
  } catch (error) {
    console.error(config.errorMessage + ':', error)
    // 错误时停止加载动画
    stopLoadingAnimation()
    // 重置终止信号
    if (abortSignalRef && typeof abortSignalRef === 'object' && 'value' in abortSignalRef) {
      try {
        abortSignalRef.value = ''
      } catch (resetError) {
        console.error('错误处理中重置终止信号时出错:', resetError)
      }
    }
    message.error(config.errorMessage + '，请稍后重试')
  } finally {
    generateDialogLoading.value = false
  }
}

// 内容处理配置
const contentConfig = {
  outline: {
    name: '大纲内容',
    ref: contentRefs.outline
  },
  chapters: {
    name: '章节规划',
    ref: contentRefs.chapters
  },
  sidelines: {
    name: '支线设定',
    ref: contentRefs.sidelines
  }
}

// 复制当前标签页内容
const copyContent = (tab) => {
  let content = ''
  let name = ''
  
  // 检查是否是临时标签页
  if (tab.startsWith('temp_tab_')) {
    const tempTab = getTempTabByName(tab)
    if (tempTab) {
      content = tempTab.content
      name = tempTab.label
    }
  } else {
    // 处理常规标签页
    const config = contentConfig[tab]
    if (config) {
      content = config.ref.value
      name = config.name
    }
  }
  
  if (!content.trim()) {
    message.warning('当前内容为空，无法复制')
    return
  }
  
  // 使用现代浏览器的Clipboard API
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(content).then(() => {
      message.success('内容已复制到剪贴板')
    }).catch(err => {
      console.error('复制失败:', err)
      message.error('复制失败，请稍后重试')
    })
  } else {
    // 降级方案：使用传统方法
    const textarea = document.createElement('textarea')
    textarea.value = content
    textarea.style.position = 'fixed'
    textarea.style.left = '-999999px'
    textarea.style.top = '-999999px'
    document.body.appendChild(textarea)
    textarea.focus()
    textarea.select()
    
    try {
      document.execCommand('copy')
      message.success('内容已复制到剪贴板')
    } catch (err) {
      console.error('复制失败:', err)
      message.error('复制失败，请稍后重试')
    } finally {
      document.body.removeChild(textarea)
    }
  }
}

// 清空当前标签页内容
const clearContent = (tab) => {
  // 检查是否是临时标签页
  if (tab.startsWith('temp_tab_')) {
    const tempTab = getTempTabByName(tab)
    if (tempTab) {
      tempTab.content = ''
      // 强制触发响应式更新
      const tabIndex = tempTabs.value.findIndex(t => t.name === tab)
      if (tabIndex !== -1) {
        const updatedTab = { ...tempTabs.value[tabIndex], content: '' }
        tempTabs.value.splice(tabIndex, 1, updatedTab)
      }
      message.success(`${tempTab.label}已清空`)
    }
  } else {
    // 处理常规标签页
    const config = contentConfig[tab]
    if (config) {
      config.ref.value = ''
      message.success(`${config.name}已清空`)
    }
  }
}

// 处理生成对话框模型选择
const handleGenerateModelSelect = (modelId) => {
  generateDialogForm.value.modelId = modelId
}

// 处理生成对话框模板选择
const handleGenerateTemplateSelect = (template) => {
  // 根据传入的参数类型处理，可能是对象或ID
  if (typeof template === 'object' && template.id) {
    generateDialogForm.value.systemPromptId = template.id
  } else if (typeof template === 'number') {
    generateDialogForm.value.systemPromptId = template
  }
}

// 处理生成对话框确认按钮
const handleGenerateConfirm = () => {
  handleGenerate()
}

// 处理生成对话框取消按钮
const handleGenerateCancel = () => {
  generateDialogVisible.value = false
}

// 终止流式生成
const abortGeneration = async (type) => {
  if (!bookId.value) {
    message.error('无效的书籍ID')
    return
  }
  
  // 获取对应的终止信号
  let abortSignal = ''
  let abortSignalRef = null
  
  // 检查是否是临时标签页
  if (type.startsWith('temp_tab_')) {
    const tempTab = getTempTabByName(type)
    if (tempTab && tempTab.abortSignal) {
      abortSignal = tempTab.abortSignal
      // 创建一个简单的ref对象来统一处理
      abortSignalRef = { value: tempTab.abortSignal }
    }
  } else {
    // 处理常规标签页
    if (type === 'outline') {
      abortSignal = outlineAbortSignal.value
      abortSignalRef = outlineAbortSignal
    } else if (type === 'chapters') {
      abortSignal = chaptersAbortSignal.value
      abortSignalRef = chaptersAbortSignal
    } else if (type === 'sidelines') {
      abortSignal = sidelinesAbortSignal.value
      abortSignalRef = sidelinesAbortSignal
    }
  }
  
  if (!abortSignal) {
    message.warning('没有正在进行的生成任务')
    return
  }
  
  try {
    // 调用终止接口，使用正确的后端 API 基础 URL
    const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://127.0.0.1:8080'}/common/stream/abort`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        abortSignal: abortSignal
      })
    })
    
    if (response.ok) {
      const result = await response.json()
      if (result.data) {
        message.success('生成任务已终止')
        
        // 停止加载动画
        stopLoadingAnimation()
        
        // 重置对应的加载状态
        if (type.startsWith('temp_tab_')) {
          // 处理临时标签页
          const tempTab = getTempTabByName(type)
          if (tempTab) {
            tempTab.loading = false
            tempTab.abortSignal = ''
            // 强制触发响应式更新
            const tabIndex = tempTabs.value.findIndex(tab => tab.name === type)
            if (tabIndex !== -1) {
              const updatedTab = { ...tempTabs.value[tabIndex], loading: false, abortSignal: '' }
              tempTabs.value.splice(tabIndex, 1, updatedTab)
            }
          }
        } else {
          // 处理常规标签页
          if (type === 'outline') {
            outlineLoading.value = false
            outlineAbortSignal.value = ''
          } else if (type === 'chapters') {
            chaptersLoading.value = false
            chaptersAbortSignal.value = ''
          } else if (type === 'sidelines') {
            sidelinesLoading.value = false
            sidelinesAbortSignal.value = ''
          }
        }
      } else {
        message.error('终止生成任务失败')
      }
    } else {
      message.error('终止生成任务失败')
    }
  } catch (error) {
    console.error('终止生成任务失败:', error)
    message.error('终止生成任务失败，请稍后重试')
  }
}
</script>

<style scoped>
.outline-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  background-color: var(--n-card-color); /* 与激活标签背景色一致 */
}

.loading-container,
.empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 16px;
}

.loading-text {
  color: var(--n-text-color-2);
  font-size: 14px;
}

.editor-container {
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px); /* 减去底部标签页高度，确保内容区域填满剩余空间 */
  flex: 1;
  min-height: 0; /* 确保内容可以正确收缩 */
  overflow: hidden;
  background-color: var(--n-card-color); /* 与激活标签背景色一致 */
}

.editor-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 确保内容可以正确收缩 */
  background-color: var(--n-card-color); /* 与激活标签背景色一致 */
}

:deep(.n-input .n-input-wrapper) {
  padding-left: 0px;
  padding-right: 0px;
}

.editor-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.content-editor {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.editor-input-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
}

/* 预览容器样式 */
.preview-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
}

/* 内容滚动条样式 */
.content-scrollbar {
  flex: 1;
  height: 100%;
}

/* 编辑器文本区域样式 */
.content-editor :deep(.n-input__textarea-el) {
  resize: none;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  line-height: 1.6;
  padding: 16px;
  box-sizing: border-box;
  border-radius: var(--n-border-radius);
  border: 1px solid var(--n-border-color);
}

/* 文本输入框样式调整 */
:deep(.content-editor .n-input__textarea) {
  min-height: 0 !important;
  resize: none !important;
}

:deep(.content-editor .n-input) {
  display: flex !important;
  flex-direction: column !important;
}

/* 预览区域样式 */
.preview-pane {
  padding: 0px 20px 20px 20px;
  box-sizing: border-box;
  background-color: var(--n-card-color); /* 与编辑区背景色一致 */
  border-radius: var(--n-border-radius);
  border: 1px solid var(--n-border-color);
  min-height: 0; /* 确保内容可以正确收缩 */
  line-height: 1.8; 
}

/* 归档按钮样式 */
.archive-btn {
  position: relative;
}

.archive-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(24, 160, 88, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.archive-btn:hover::after {
  opacity: 1;
}

/* 临时标签页样式 */
.temp-tab-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.temp-tab-pane .editor-input-container,
.temp-tab-pane .preview-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.temp-tab-pane .content-scrollbar {
  height: 100%;
  flex: 1;
  min-height: 0;
}

.temp-tab-pane .content-editor {
  height: 100%;
  flex: 1;
  min-height: 0;
}

/* 确保临时标签页的输入框占满高度 */
.temp-tab-pane :deep(.n-input) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.temp-tab-pane :deep(.n-input__textarea) {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.temp-tab-pane :deep(.n-input__textarea-el) {
  height: 100% !important;
  min-height: 100% !important;
  resize: none !important;
}

/* 加载动画样式 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading-container .n-spin {
  animation: pulse 1.5s infinite ease-in-out;
}

/* 对话框样式优化 */
.generate-outline-modal,
.generate-chapters-modal {
  max-height: 80vh;
  overflow-y: auto;
}

.generate-form {
  padding: 16px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .outline-editor {
    padding: 12px;
  }
  
  .editor-content {
    padding: 8px;
  }
  
  .preview-pane {
    padding: 16px;
    line-height: 1.7; /* 在小屏幕上稍微减小行高 */
  }
  
  .content-editor :deep(.n-input__textarea-el) {
    padding: 12px;
  }
}

/* 标签页内容区域样式 */
:deep(.n-tabs) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

:deep(.n-tabs-nav) {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background-color: var(--n-color-hover) !important;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--n-border-color);
  border-bottom: none;
}

:deep(.n-tabs-nav-wrapper) {
  background-color: var(--n-color-hover) !important;
}

:deep(.n-tabs-nav-scroll-content) {
  background-color: var(--n-color-hover) !important;
}

:deep(.n-tabs-pane-wrapper) {
  flex: 1;
  height: calc(100% - 46px); /* 减去标签页头部高度 */
  overflow: hidden;
  position: relative;
}

:deep(.n-tab-pane) {
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* 编辑器内容区域样式 */
.editor-content {
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* 加载遮罩容器样式 */
.loading-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(3px);
  z-index: 1000;
  border-radius: var(--n-border-radius);
}

/* 临时标签页加载遮罩样式 */
.temp-tab-pane .loading-overlay-container {
  z-index: 1001;
}

/* 编辑器输入容器和预览容器相对定位，作为遮罩的参考 */
.editor-input-container,
.preview-container {
  position: relative;
}
</style>